import React, { useEffect } from 'react';
import { Form, Input, FormInstance } from 'antd';

type Props = {
    addRoleRef: React.MutableRefObject<FormInstance | null>;
};

type FormItemLayout = {
    labelCol: {
        sm: { span: number };
    };
    wrapperCol: {
        sm: { span: number };
    };
};

const formItemLayout: FormItemLayout = {
    labelCol: {
        sm: { span: 4 }
    },
    wrapperCol: {
        sm: { span: 19 }
    }
};

// 添加角色的form组件
const AddForm: React.FC<Props> = ({ addRoleRef }) => {
    const [form] = Form.useForm();
    useEffect(() => {
        addRoleRef.current = form;
    }, [addRoleRef, form]);
    return (
        <Form {...formItemLayout} form={form}>
            <Form.Item label="角色名称" name="roleName" rules={[
                { required: true, message: '角色名称必须输入.' }
            ]}>
                <Input type="text" placeholder="请输入角色名称" />
            </Form.Item>
        </Form>
    );
};

export default AddForm;